<template>
  <div>
    <!-- 顶部 -->
    <nav-top class="navtop"
      >免费
      <template v-slot:gender>
        <div class="middle" v-show="!$route.meta.gender">
          <button
            :class="{ active: $store.state.ismale == 'male' }"
            @click="active('male')"
          >
            男生
          </button>
          <button
            :class="{ active: $store.state.ismale == 'female' }"
            @click="active('female')"
          >
            女生
          </button>
        </div>
      </template>
    </nav-top>
    <!-- 本期限免 -->
    <book-item :data="nextFree" :time="time" class="margin">
      <h3>
        本期限免
        <div class="timeB">
          <van-count-down :time="time" format="DD:HH:mm:ss:SS">
            <template #default="timeData">
              <span class="block days">{{ timeData.days | timeformat }}</span
              >:<span class="block">{{ timeData.hours | timeformat }}</span
              >:<span class="block">{{ timeData.minutes | timeformat }}</span
              >:<span class="block">{{ timeData.seconds | timeformat }}</span>
            </template>
          </van-count-down>
        </div>
      </h3>
      <template v-slot:em>
        <em>限免</em>
      </template>
    </book-item>
    <!-- 下期限免 -->
    <book-item :data="nextFree" class="margin">
      <h3>下期限免</h3>
    </book-item>
    <!-- 人气免费 -->
    <book-list :data="temporary" class="margin">
      <template v-slot:header>
        <h3>人气免费 <span>人气最高的免费作品</span></h3>
        <div class="more" @click="toRouter('morelist',{tit:'人气免费'})">
          更多<span class="iconfont icon-arrow-right-"></span>
        </div>
      </template>
    </book-list>
    <!-- 新书免费 -->
    <book-list :data="temporary" class="margin">
      <template v-slot:header>
        <h3>新书免费 <span>点击最高的免费新书</span></h3>
        <div class="more">
          更多<span class="iconfont icon-arrow-right-"></span>
        </div>
      </template>
    </book-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 2 * 24 * 60 * 60 * 1000,
      format: "DD:HH:mm:ss",
      nextFree: {
        female: [
          {
            _id: "5f9b7a995ca7a01decd02488",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3515379%2F3515379_5ae14e481d5843768c5f9f3f92438561.jpg%2F",
            title: "神医魔后不好惹",
            author: "杨十六",
          },
          {
            _id: "5f9b7a995ca7a01decd02488",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3515379%2F3515379_5ae14e481d5843768c5f9f3f92438561.jpg%2F",
            title: "神医魔后不好惹",
            author: "杨十六",
          },
          {
            _id: "5f9b7a995ca7a01decd02488",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3515379%2F3515379_5ae14e481d5843768c5f9f3f92438561.jpg%2F",
            title: "神医魔后不好惹",
            author: "杨十六",
          },
          {
            _id: "5f9b7a995ca7a01decd02488",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3515379%2F3515379_5ae14e481d5843768c5f9f3f92438561.jpg%2F",
            title: "神医魔后不好惹",
            author: "杨十六",
          },
          {
            _id: "5f9b7a995ca7a01decd02488",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3515379%2F3515379_5ae14e481d5843768c5f9f3f92438561.jpg%2F",
            title: "神医魔后不好惹",
            author: "杨十六",
          },
          {
            _id: "5f9b7a995ca7a01decd02488",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3515379%2F3515379_5ae14e481d5843768c5f9f3f92438561.jpg%2F",
            title: "神医魔后不好惹",
            author: "杨十六",
          },
          {
            _id: "5f9b7a995ca7a01decd02488",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3515379%2F3515379_5ae14e481d5843768c5f9f3f92438561.jpg%2F",
            title: "神医魔后不好惹",
            author: "杨十六",
          },
        ],
        male: [
          {
            _id: "5fffff957e23d81000adc2c5",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3522350%2F3522350_725b78de680845bf89c1fa322be5a26d.jpg%2F",
            title: "我开局震惊了女帝",
            author: "隔江",
          },
          {
            _id: "5fffff957e23d81000adc2c5",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3522350%2F3522350_725b78de680845bf89c1fa322be5a26d.jpg%2F",
            title: "我开局震惊了女帝",
            author: "隔江",
          },
          {
            _id: "5fffff957e23d81000adc2c5",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3522350%2F3522350_725b78de680845bf89c1fa322be5a26d.jpg%2F",
            title: "我开局震惊了女帝",
            author: "隔江",
          },
          {
            _id: "5fffff957e23d81000adc2c5",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3522350%2F3522350_725b78de680845bf89c1fa322be5a26d.jpg%2F",
            title: "我开局震惊了女帝",
            author: "隔江",
          },
          {
            _id: "5fffff957e23d81000adc2c5",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3522350%2F3522350_725b78de680845bf89c1fa322be5a26d.jpg%2F",
            title: "我开局震惊了女帝",
            author: "隔江",
          },
          {
            _id: "5fffff957e23d81000adc2c5",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3522350%2F3522350_725b78de680845bf89c1fa322be5a26d.jpg%2F",
            title: "我开局震惊了女帝",
            author: "隔江",
          },
          {
            _id: "5fffff957e23d81000adc2c5",
            cover:
              "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3522350%2F3522350_725b78de680845bf89c1fa322be5a26d.jpg%2F",
            title: "我开局震惊了女帝",
            author: "隔江",
          },
        ],
      }, // 下期免费静态数据
      temporary: [
        {
          _id: "5d020a2e035a4416960fd2f1",
          author: "绝人",
          cover:
            "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3387088%2F3387088_368c1a79dccf420d8a343009fd954d29.jpg%2F",
          majorCate: "都市",
          shortIntro:
            "“我叫韩三千”\r\n三年前，我如同一条狗一样，被赶出家族的大门\r\n三年后，家族掌门却来求我，让我回家主持大局……\r\n\r\n入赘三年，我可以忍受岳母的欺辱，朋友的嘲笑，但我忍不了你受一丁点委屈\r\n隐忍三年，我可以承担废物的骂名，家族的唾弃，但我受不了你哪怕一滴眼泪\r\n所有人都以为可以骑在我头上，而我，只等你牵起我的手，便给你整个世界。",
          title: "超级女婿",
        },
        {
          _id: "5d020a2e035a4416960fd2f1",
          author: "绝人",
          cover:
            "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3387088%2F3387088_368c1a79dccf420d8a343009fd954d29.jpg%2F",
          majorCate: "都市",
          shortIntro:
            "“我叫韩三千”\r\n三年前，我如同一条狗一样，被赶出家族的大门\r\n三年后，家族掌门却来求我，让我回家主持大局……\r\n\r\n入赘三年，我可以忍受岳母的欺辱，朋友的嘲笑，但我忍不了你受一丁点委屈\r\n隐忍三年，我可以承担废物的骂名，家族的唾弃，但我受不了你哪怕一滴眼泪\r\n所有人都以为可以骑在我头上，而我，只等你牵起我的手，便给你整个世界。",
          title: "超级女婿",
        },
        {
          _id: "5d020a2e035a4416960fd2f1",
          author: "绝人",
          cover:
            "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3387088%2F3387088_368c1a79dccf420d8a343009fd954d29.jpg%2F",
          majorCate: "都市",
          shortIntro:
            "“我叫韩三千”\r\n三年前，我如同一条狗一样，被赶出家族的大门\r\n三年后，家族掌门却来求我，让我回家主持大局……\r\n\r\n入赘三年，我可以忍受岳母的欺辱，朋友的嘲笑，但我忍不了你受一丁点委屈\r\n隐忍三年，我可以承担废物的骂名，家族的唾弃，但我受不了你哪怕一滴眼泪\r\n所有人都以为可以骑在我头上，而我，只等你牵起我的手，便给你整个世界。",
          title: "超级女婿",
        },
        {
          _id: "5d020a2e035a4416960fd2f1",
          author: "绝人",
          cover:
            "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3387088%2F3387088_368c1a79dccf420d8a343009fd954d29.jpg%2F",
          majorCate: "都市",
          shortIntro:
            "“我叫韩三千”\r\n三年前，我如同一条狗一样，被赶出家族的大门\r\n三年后，家族掌门却来求我，让我回家主持大局……\r\n\r\n入赘三年，我可以忍受岳母的欺辱，朋友的嘲笑，但我忍不了你受一丁点委屈\r\n隐忍三年，我可以承担废物的骂名，家族的唾弃，但我受不了你哪怕一滴眼泪\r\n所有人都以为可以骑在我头上，而我，只等你牵起我的手，便给你整个世界。",
          title: "超级女婿",
        },
      ], // 静态数据
    };
  },
  methods: {
    active(flag) {
      this.$store.commit("setIsmale", flag);
    },
    toRouter(path, params) {
      this.$router.push({
        path: `/${path}`,
        query: { ...params },
      });
    },
  },
  filters: {
    timeformat: function (old) {
      return old < 10 ? "0" + old : old;
    },
  },
};
</script>
<style lang="less" scoped>
.navtop{
  background-color: white;
}
// 时间样式
.timeB {
  // 时间样式
  text-indent: 0;
  display: inline-block;
  .block {
    display: inline-block;
    color: #fff;
    background-color: black;
    text-indent: 0px;
    line-height: initial;
    padding: 1px;
    border-radius: 1px;
    &.days {
      background-color: #ee0a24;
    }
  }
}
</style>